---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Embed Soundcloud clip
description: Embed a Soundcloud clip with an iframe.
tags:
  - ui
---
<div id='map'></div>

<script>

var map = L.mapbox.map('map')
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

// The GeoJSON representing a point feature with a property of 'sounds'
var geoJson = {
    type: 'FeatureCollection',
    features: [{
        type: 'Feature',
        properties: {
            title: 'Friendly Fires - Paris (Aeroplane Remix Feat. Au Revoir Simone)',
            'marker-color': '#f00',
            'marker-size': 'large',
            'marker-symbol': 'star',
            url: 'http://en.wikipedia.org/wiki/Paris',
            sounds: '<iframe width="100%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/34849808&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>'
        },
        geometry: {
            type: 'Point',
            coordinates: [2.3486709594726562,48.85703523304221]
        }
    }]
};

var myLayer = L.mapbox.featureLayer().addTo(map);

// Add the iframe in a custom popup using the custom feature properties
myLayer.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;

    // Create custom popup content
    var popupContent =  '<a target="_blank" class="popup" href="' +
        feature.properties.url + '">' +
        feature.properties.sounds +
        '<h2>' + feature.properties.title + '</h2>' + '</a>';

    // http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 320
    });
});

// Add features to the map
myLayer.setGeoJSON(geoJson);

map.setView([48.85703523304221,2.3486709594726562], 12);

</script>
